import { PureComponent } from 'react'
import SingleTable from 'components/table/index'
import { Input, Button, Select, DatePicker } from 'antd'
import styles from './customerManagement.less'
const { Option } = Select
export default class CustomerManagement extends PureComponent {
    render(){
        const columns = [
            {
                key: 'gmtCreate',
                title: '会员号',
                dataIndex: 'gmtCreate',
                align: 'center',
            },
            {
                key: 'operationTypeName',
                title: '账号',
                dataIndex: 'operationTypeName',
                align: 'center',
            },
            {
                key: 'creatorName',
                title: '注册时间',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '4',
                title: '用户类型',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
              key: '5',
              title: '邮箱地址',
              dataIndex: 'creatorName',
              align: 'center',
            },
            {
              key: '6',
              title: '密码',
              dataIndex: 'creatorName',
              align: 'center',
            },
            {
                key: '7',
                title: '联系人',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '8',
                title: '当前使用平台',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '9',
                title: '版本号',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '10',
                title: '最后登录时间',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '11',
                title: '成交总金额-到付',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '12',
                title: '成交总金额-预付',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '13',
                title: '编辑',
                dataIndex: 'creatorName',
                align: 'center',
            },
          ]
          const dataList = []
        return(
            <div className={styles.customerManagement}>
                <div className={styles.customerManagementBox}>
                    <h2>客户管理</h2>
                </div>
                <div className={styles.customerManagementSearch}>
                    <div className={styles.customerManagementSin}>
                        <span className={styles.customerManagementSpan}>会员号：</span>
                        <Input className={styles.customerManagementInput}/>
                    </div>
                    <div className={styles.customerManagementSin} style={{marginLeft: '28px'}}>
                        <span className={styles.customerManagementSpan}>会员帐号：</span>
                        <Input className={styles.customerManagementInput}/>
                    </div>
                    <div className={styles.customerManagementSin} style={{marginLeft: '28px'}}>
                        <span className={styles.customerManagementSpan}>用户类型：</span>
                        <Select className={styles.customerManagementInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                    <div className={styles.customerManagementSin} style={{marginLeft: '28px'}}>
                        <span className={styles.customerManagementSpan}>注册时间-开始：</span>
                        <DatePicker className={styles.customerManagementInput}/>
                    </div>
                </div>
                <div className={styles.customerManagementSearch}>
                    <div className={styles.customerManagementSin}>
                        <span className={styles.customerManagementSpan}>注册时间-结束：</span>
                        <DatePicker className={styles.customerManagementInput}/>
                    </div>
                    <div className={styles.customerManagementSin} style={{marginLeft: '28px'}}>
                        <span className={styles.customerManagementSpan}>会员邮箱：</span>
                        <Input className={styles.customerManagementInput}/>
                    </div>
                </div>
                <Button type="primary" icon="search" style={{margin: '0 0 24px 24px'}}>查询</Button>
                <Button icon="export" style={{marginLeft: '24px'}}>TRX客户账单导出</Button>
                <div className={styles.customerManagementTable}>
                    <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                    />
                </div>
            </div>
        )
    }
}